#include("./layout.html")
#include("_sidebar.html")
#include("_include.html")

#@layout()

#define script()
#@articleReprintIncludeJs()
#@sidebarResource()
#end

#define css()
#@articleReprintIncludeCss()
#end

#define content()
<div class="col-md-8 col-lg-8 col-xl-9 #(option('whimurmur_sidebar_position') == 'left' ? 'offset-md-4 offset-lg-4 offset-xl-3 cl-right' : 'cl-left')">
    #if(linesOption("whimurmur_notice")  && linesOption("whimurmur_notice").size() > 0 && linesOption("whimurmur_notice")[0].trim())
    <div class="alert alert-light text-success">
      <span><i class="fa fa-bullhorn fa-fw"></i><strong>通知</strong>&nbsp;#(linesOption("whimurmur_notice")[0].trim() ??)</span>
    </div>
    #end
    
    <div class="alert alert-light text-danger"><i class="fa fa-external-link fa-fw"></i> 文章来源于网络，无法注明出处的还请谅解，如果出处注明错误（如仍是载转），请联系我修改</div>
    
    #set(map={})
    #categories()
    #for(c: categories)
        #set(map[c.id]=c)
    #end
    #end
    #articleCategories(article.getId(), 'category')
    <nav class="breadcrumb">
        #for(category: categories)
            #if(for.count == 1)
              #set(cs=[0,0,0,0,0,0])
              #set(cs[0]=article)
              #set(cs[1]=category)
              #set(layer=1)
              
              #if(cs[1].parentId != 0)
                #set(cs[2]=map[cs[1].parentId])
                #set(layer=2)
                #if(cs[2].parentId != 0)
                    #set(cs[3]=map[cs[2].parentId])
                    #set(layer=3)
                    #if(cs[3].parentId != 0)
                        #set(cs[4]=map[cs[3].parentId])
                        #set(layer=4)
                        #if(cs[4].parentId != 0)
                            #set(cs[5]=map[cs[4].parentId])
                            #set(layer=5)
                        #end
                    #end
                #end
              #end
              
             <span><i class="fa fa-bars fa-fw"></i>
                #for(i=layer; i>=0; i--)
                #if(i == 1)
                <a class="breadcrumb-item" href="#(cs[i].url)">#(cs[i].title) <i class="fa fa-hand-o-left link-color"></i></a>
                #else
                <span class="breadcrumb-item active">#(cs[i].title)</span>
                #end
                #end
              </span>
            #end
        #end
    </nav>
    #end

    <div class="cl-artical-content pt-4 bg-light pr">
        <div class='clearfix'>
            <div class='pull-left mw-85'><h2 class="cl-artical-title pt-0">#(article.title)</h2></div>
            <div class='pull-right article-screen' id='article-full-screen'><i title='进入全屏阅读' class='fa fa-expand fa-2x scale-12'></i></div>
            <div class='pull-right article-screen hidden' id='article-normal-screen'><i title='退出全屏阅读' class='fa fa-compress fa-2x scale-08'></i></div>
        </div>
        <div class="cl-card-tag">
            <div><span><i class="fa fa-eye fa-fw"></i>#(article.view_count ?? 0)</span>人浏览 / <span><i class="fa fa-comment fa-fw"></i>#(article.comment_count ?? 0)</span>人评论
            <span><span id="article-page"> / <i class="fa fa-book fa-fw"></i><span id='pages'></span>页</span> | 这是对我有帮助的文章<i class="fa fa-smile-o"></i> </span>
            #articleCategories(article.getId(), 'category')
                &nbsp;|&nbsp;<i class="fa fa-bookmark fa-fw"></i>分类：
                #for(category: categories)
                #(category.getParent())
                    <a href="#(category.url ??)">#(category.title ??)</a>
                #end
            #end
            #articleCategories(article.getId(), 'tag')
                &nbsp;|&nbsp;<i class="fa fa-tags fa-fw"></i>标签：
                #for(category: categories)
                    <a href="#(category.url ??)">#(category.title ??)</a>
                    #if(for.size != for.count)
                        &nbsp;/&nbsp;
                    #end
                #end
            #end
            </div>
        </div>
        <div class="cl-artical">
            #(article.flag == 'hidden' ? '该文章已隐藏，你无权查看！' : article.content)
            #if(option('whimurmur_article_reprint_statement_show'))
            <hr>
            <blockquote>
                <p>#if(option('whimurmur_article_reprint_statement'))<span class='text-danger'>#option('whimurmur_article_reprint_statement')：</span>#end<span>#option('whimurmur_article_reprint_statement_content')</span></p>
            </blockquote>
            #end
        </div>
        #if(linesOption("whimurmur_endnote") && linesOption("whimurmur_endnote").size() > 0 && linesOption("whimurmur_endnote")[0].trim())
        <hr>
        <div class="pl-4 noSel py-3" id="endnote">
            <div class="shadow-blink">#(linesOption("whimurmur_endnote")[0].trim() ??)</div>
        </div>
        #end
        <div id="page-border"></div>
        <input type="hidden" id="articleId" value="#(article.id)" >
    </div>
    
    <div class="text-center" id='article-author-support'>
        <span class="pr il-b">
            <span class="bg-info thumbs_button fa fa-thumbs-up"
            title="点赞，支持一下" id="thumbUp"> 点赞(<span id="thumbUpNum">0</span>)</span><!--
            --><span class="bg-danger reward_button fa fa-money" id="reward"
                #if(!option('whimurmur_donate_wechat') && !option('whimurmur_donate_alipay')) title="作者还没准备好要打赏" #else title="扫描二维码，支持一下" #end> 打赏</span>
            #if(option('whimurmur_donate_wechat') || option('whimurmur_donate_alipay'))
            <div id="donate-money">
                #if(option('whimurmur_donate_wechat') && option('whimurmur_donate_alipay'))
                <div class="reward-scan">
                    <img src="#option('whimurmur_donate_wechat')" class="reward-img" /><br>
                    <span class='p-1 wechat-scan'>微信扫一扫</span>
                </div><!--
                --><div class="reward-scan">
                    <img src="#option('whimurmur_donate_alipay')" class="reward-img" /><br>
                    <span class='p-1 alipay-scan'>支付宝扫一扫</span>
                </div>
                #else if(option('whimurmur_donate_wechat'))
                 <div class="reward-scan">
                    <img src="#option('whimurmur_donate_wechat')" class="reward-img" /><br>
                    <span class='p-1 wechat-scan'>微信扫一扫</span>
                </div>
                #else
                <div class="reward-scan">
                    <img src="#option('whimurmur_donate_alipay')" class="reward-img" /><br>
                    <span class='p-1 alipay-scan'>支付宝扫一扫</span>
                </div>
                #end
            </div>
            #end
        </span>
    </div>


    #relevantArticles(article, count=3, hiddenFlag=true)
    <div class="recommend-panel bg-light">
        <h4 class="right-card-title">相关文章</h4>
        <div class="card-deck">

            #for(article :relevantArticles )
            <div class="card ll-panel">
                <a class="recommend-panel-link" href="#(article.url ??)" target="#(option('whimurmur_link_to_blank') && article.linkTo ? '_blank' : '_self')">
                    <div class="recommend-panel-top">
                        <img src="#(article.thumbnail ? article.thumbnail : (article.showImage ? article.showImage : 'img/default-img.png'))" class="img-fluid"
                             alt="#(article.title ??)">
                    </div>
                    <div class="recommend-panel-bottom">
                        #(article.title ??)
                    </div>
                </a>
            </div>
            #end

        </div>
    </div>
    #end
    
    
    #userArticles(userId=article.userId, count=3, orderBy="RAND()", hiddenFlag=true)
    #if(!(articles.size() == 1 && articles[0].id == article.id))
    <div class="recommend-panel bg-light">
        <h4 class="right-card-title">作者其它文章</h4>
        <div class="card-deck">
            #set(count=0)
            #for(userArticle :articles )
            #if(article.id != userArticle.id && count < 3)
            #set(count=count+1)
            <div class="card ll-panel">
                <a class="recommend-panel-link" href="#(userArticle.url ??)" target="#(option('whimurmur_link_to_blank') && article.linkTo ? '_blank' : '_self')">
                    <div class="recommend-panel-top">
                        <img src="#(userArticle.thumbnail ? userArticle.thumbnail : (userArticle.showImage ? userArticle.showImage : 'img/default-img.png'))" class="img-fluid"
                             alt="#(userArticle.title ??)">
                    </div>
                    <div class="recommend-panel-bottom">
                        #(userArticle.title ??)
                    </div>
                </a>
            </div>
            #end
            #end

        </div>
    </div>
    #end
    #end

    #include("./fragment/articleCommentPage.html")
    
    #if(option("whimurmur_content_ad" ??))
    <div class="content-ad bg-light" id="content-ad">
        <div class="content-ad-title">广告位-动动手帮助网站活下去</div>
        <div class="content-ad-main pb-3">
            <div id="content-tail-ad" class="m-1 ad-content">
                #option("whimurmur_content_ad" ??)
            </div>
        </div>
    </div>
    #end

</div>

<div class="col-md-4 col-lg-4 col-xl-3 #(option('whimurmur_sidebar_position') == 'left' ? 'offset-mdn-8 offset-lgn-8 offset-xln-9 offset-smn-0 cl-left' : 'cl-right')">
    #@sidebarContent()
</div>
<div id="catalog">
    <a id="catalog-icon" title="文章目录" data-toggle="tooltip"><img alt="" src="img/icon/catalog.png" /></a>
    <div id="catalog-wrapper" class="catalog-hide">
        <div id="toc" class="bg-light"></div>
    </div>
</div>
#end